<script lang="ts" setup>
import { ref, watch } from 'vue';
import { getAttendancesAdtStatuListApi } from '@/common/apis/attendance';
import type { AttendanceScheme } from '@/common/types/attendance-type';
import { formatData } from '@/common/utils/backg-date-conversion'
import { putAttendancesIdApi } from '@/common/apis/attendance'
import { message } from 'ant-design-vue';

const open = ref<boolean>(false);
const clickedData = ref<AttendanceScheme>(); // 用于接收父组件传递的数据
const statusData = ref<Array<{ [key: string]: string }>>([]); // 考勤状态数据
const selectedValue = ref<string>(''); // 用于存储选中的值
const statusName = ref<string>(''); // 用于显示当前状态

// 状态映射
const statusMap: Record<number, string> = {
    1: '正常',
    2: '旷工',
    3: '迟到',
    4: '早退',
    5: '外出',
    6: '出差',
    7: '年假',
    8: '事假',
    9: '病假',
    10: '婚假',
    11: '丧假',
    12: '产假',
    13: '奖励产假',
    14: '陪产假',
    15: '探亲假',
    16: '工伤假',
    17: '调休',
    18: '产检假',
    19: '流产假',
    20: '长期病假',
    21: '补签',
    22: '休息',
    99: '未知状态'
};

const props = defineProps({
    getAttendancesApiData: {
        type: Function,
        required: true
    }
})

// 暴露一个方法，用于接收父组件传递的数据
const showModal = (data: AttendanceScheme) => {
    open.value = true;
    clickedData.value = data;
    console.log(clickedData.value, 'clickedData.value')

};

// 获取员工状态接口
const getAttendancesAdtStatuListData = async () => {
    if (clickedData.value?.userId) {
        const res = await getAttendancesAdtStatuListApi({ userId: clickedData.value.userId })
        console.log(res, '考勤状态数据')
        statusData.value = res.data.data;
        // 初始化选中值
        if (clickedData.value.adtStatu) {
            selectedValue.value = clickedData.value.adtStatu.toString();
            statusName.value = statusMap[clickedData.value.adtStatu] || '未知状态';
        }
    }
};

// 监听 selectedValue 的变化
watch(selectedValue, (newValue) => {
    statusName.value = statusMap[Number(newValue)] || '未知状态';
    console.log(selectedValue.value, ' statusName.value')
});

const handleOk = async () => {
    const payload = {
        adtStatu: Number(selectedValue.value),
        day: clickedData.value?.day,
        userId: clickedData.value?.userId,
        departmentId: clickedData.value?.departmentId,
    }

    await putAttendancesIdApi(payload).then(res => {
        message.success(res.data.message)
        props.getAttendancesApiData()
        open.value = false;
    }).catch(err => {
        message.warning(err.response.data.message)
    })


};

defineExpose({
    showModal,
    getAttendancesAdtStatuListData
});
</script>

<template>
    <a-modal v-model:open="open" @ok="handleOk">
        <h2 v-if="clickedData">{{ formatData(clickedData.day) }}(实际工作日考勤方案)</h2>
        <p>注：统计考勤时，异常状态优先正常状态</p>
        <a-radio-group v-for="(item, index) in statusData" :key="index" v-model:value="selectedValue" name="radioGroup">
            <a-radio :value="Object.keys(item)[0]">
                {{ Object.values(item)[0] }}
            </a-radio>
        </a-radio-group>
    </a-modal>
</template>